<template>
  <div class="box">
    <van-popup v-model="show" class="hyshow sxshow" closeable position="bottom">
      <h2>{{ $t("common.shaixuan") }}</h2>
      <div class="sxtitle">
        <p>{{ $t("long.shijian") }}</p>
      </div>
      <div class="sxtime">
        <div class="sxtime_top">
          <div @click="showtime($t('long.qishishijian'), 'slt', leftdate)">
            {{ leftdate }}
          </div>
          <p>{{ $t("long.dao") }}</p>
          <div @click="showtime($t('long.jieshushijian'), 'srt')">
            {{ rightdate }}
          </div>
        </div>
        <div class="sxtime_bottom">
          <p
            @click="recentlys('day', 1, 0)"
            :class="recently == 0 ? 'sxtime_acp' : ''"
          >
            {{ $t("long.zuijinyitian") }}
          </p>
          <p
            @click="recentlys('day', 7, 1)"
            :class="recently == 1 ? 'sxtime_acp' : ''"
          >
            {{ $t("long.zuijinyizhou") }}
          </p>
          <p
            @click="recentlys('month', 1, 2)"
            :class="recently == 2 ? 'sxtime_acp' : ''"
          >
            {{ $t("long.zuijinyiyue") }}
          </p>
          <p
            @click="recentlys('month', 3, 3)"
            :class="recently == 3 ? 'sxtime_acp' : ''"
          >
            {{ $t("long.zuijinsanyue") }}
          </p>
        </div>
      </div>
      <div class="sxtitle">
        <p>{{ $t("long.zhuangtai") }}</p>
      </div>
      <div class="sxstate">
        <div class="sxon" @click="$set(statusArr, 0, !statusArr[0])">
          <img
            :src="
              statusArr[0]
                ? require('../../../assets/images/huangdui.png')
                : require('../../../assets/images/huangduib.png')
            "
            alt=""
          />
          <p>{{ $t("long.quanbuchengjiao") }}</p>
        </div>
        <div class="sxon" @click="$set(statusArr, 1, !statusArr[1])">
          <img
            :src="
              statusArr[1]
                ? require('../../../assets/images/huangdui.png')
                : require('../../../assets/images/huangduib.png')
            "
            alt=""
          />
          <p>{{ $t("long.bufenchengjiao") }}</p>
        </div>
        <div class="sxon" @click="$set(statusArr, 2, !statusArr[2])">
          <img
            :src="
              statusArr[2]
                ? require('../../../assets/images/huangdui.png')
                : require('../../../assets/images/huangduib.png')
            "
            alt=""
          />
          <p>{{ $t("long.yichexiao") }}</p>
        </div>
        <div class="sxon" @click="$set(statusArr, 3, !statusArr[3])">
          <img
            :src="
              statusArr[3]
                ? require('../../../assets/images/huangdui.png')
                : require('../../../assets/images/huangduib.png')
            "
            alt=""
          />
          <p>{{ $t("long.yiguoqi") }}</p>
        </div>
      </div>
      <div class="sxtitle">
        <p>{{ $t("long.fangxiang") }}</p>
      </div>
      <div class="sxstate">
        <div class="sxon" @click="$set(sideArr, 0, !sideArr[0])">
          <img
            :src="
              sideArr[0]
                ? require('../../../assets/images/huangdui.png')
                : require('../../../assets/images/huangduib.png')
            "
            alt=""
          />
          <p>{{ $t("long.mairu") }}</p>
        </div>
        <div class="sxon" @click="$set(sideArr, 1, !sideArr[1])">
          <img
            :src="
              sideArr[1]
                ? require('../../../assets/images/huangdui.png')
                : require('../../../assets/images/huangduib.png')
            "
            alt=""
          />
          <p>{{ $t("long.maichu") }}</p>
        </div>
      </div>
      <div class="reset_confirm">
        <van-button @click="sxreset" color="#444A58">{{
          $t("common.chong")
        }}</van-button>
        <van-button @click="sxnotarize" color="#0A7AFF">{{
          $t("long.queren")
        }}</van-button>
      </div>
    </van-popup>
    <van-popup
      v-model="timeshow"
      class="hyshow timeshow"
      position="bottom"
      :style="{ height: '38%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        @confirm="leftdates"
        @cancel="leftdateqxs"
        type="date"
        :title="qzjs"
      />
    </van-popup>
    <van-popup
      v-model="timeshow1"
      class="hyshow timeshow timeshow1"
      position="bottom"
    >
      <van-datetime-picker
        v-model="currentDate"
        @confirm="rightdates"
        @cancel="rightdateqxs"
        @change="ssdates"
        type="date"
        :title="qzjs"
      >
        <template #columns-top>
          <div class="sxtime">
            <div class="sxtime_top">
              <div
                @click="ssdatess(0, $t('long.qishishijian'))"
                :style="{ color: !ssdate ? '#0A7AFF' : '' }"
              >
                {{ qsdate }}
              </div>
              <p>{{ $t("long.dao") }}</p>
              <div
                @click="ssdatess(1, $t('long.jieshushijian'))"
                :style="{ color: ssdate ? '#0a7aff' : '' }"
              >
                {{ jsdate }}
              </div>
            </div>
          </div>
        </template>
      </van-datetime-picker>
    </van-popup>
    <van-popup
      v-model="hyshow"
      class="hyshow hyshow2"
      closeable
      position="bottom"
      style="min-height:80vh;"
    >
      <h2>{{ $t("long.xuanzeheyue") }}</h2>
      <van-search
        v-model="valuesearch"
        class="search"
        :left-icon="require('../../../assets/images/fatsearch.png')"
        style=""
      />
      <div class="huadong">
        <div
          :style="{ color: hyallindex == item.symbolId ? '#0A7AFF' : '' }"
          v-for="item in allOSList"
          @click="hyoptions(item)"
          :key="item.symbolId"
          class="hyoption hyoption1"
        >
          {{ item.symbolName }}
          <img
            v-show="hyallindex == item.symbolId"
            src="../../../assets/images/language1.png"
            alt=""
          />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      allOSList:[],
      oldOSList:[],
      valuesearch:"",
      hyshow: false,
      hyoption: null,
      hyallindex: "",

      qzjs: this.$t("long.qishishijian"),
      timea: "slt",
      currentDate: new Date(),
      timeshow: false,
      timeshow1:false,
      show: false,
      leftdate: "2022-01-17",
      rightdate: "2022-02-17",
      qsdate: "2022-02-17",
      qsdatez: null,
      jsdate: "2022-02-17",
      jsdatez: null,
      recently: 1,
      statusArr: [true, true, true, true],
      sideArr: [true, true],
      sxstatus: [2, 3, 4, 5],
      sxside: [0, 1],
      ssdate: 0,
    };
  },
  watch:{
    valuesearch(val) {
      this.allOSList = this.oldOSList.filter((v) =>
        v.symbolName.includes(val.toUpperCase())
      );
    },
  },
  created() {
    this.rightdate = moment().format("YYYY-MM-DD");
    this.leftdate = moment().subtract(7, "day").format("YYYY-MM-DD");
    this.jsdate = moment().format("YYYY-MM-DD");
    this.qsdate = moment().subtract(7, "day").format("YYYY-MM-DD");
  },
  methods: {
    hyoptions(item) {
      this.hyshow = false;
      this.hyallindex = item.symbolId;
      this.$emit('changeSymbol',item)
    },
    leftdates(val) {
      if (this.timea == "slt") {
        this.leftdate = moment(val).format("YYYY-MM-DD");
      } else if (this.timea == "srt") {
        this.rightdate = moment(val).format("YYYY-MM-DD");
      }
      this.recently = 4;
      this.timeshow = false;
    },
    leftdateqxs() {
      this.timeshow = false;
    },
    rightdateqxs() {
      this.timeshow1 = false;
    },
    rightdates() {
      console.log(moment(this.jsdate).valueOf());
      if (moment(this.qsdate).valueOf() > moment(this.jsdate).valueOf()) {
        Toast(this.$t("long.riqiwuxiao"));
      } else {
        this.timeshow1 = false;
        this.qsdatez = this.qsdate;
        this.jsdatez = this.jsdate;
        this.$emit('refreshGetList')
        // this.page = 1;
        // if (this.active == 1) {
        //   this.getTradeList();
        // } else if (this.active == 2) {
        //   this.getFundRateList();
        // }
      }
    },
    recentlys(rq, val, ys) {
      if (rq == "day") {
        this.leftdate = moment().subtract(val, "day").format("YYYY-MM-DD");
      } else if (rq == "month") {
        this.leftdate = moment().subtract(val, "month").format("YYYY-MM-DD");
      }
      this.rightdate = moment().format("YYYY-MM-DD");
      this.recently = ys;
    },
    showtime(va1, val, va2) {
      this.qzjs = va1;
      this.timea = val;
      this.timeshow = true;
      this.currentDate = new Date(moment(va2).format("YYYY-MM-DD"));
    },
    ssdates(picker) {
      const format =
        picker.getValues()[0] +
        "-" +
        picker.getValues()[1] +
        "-" +
        picker.getValues()[2];
      if (this.ssdate == 0) {
        this.qsdate = format;
      } else if (this.ssdate == 1) {
        this.jsdate = format;
      }
    },
    ssdatess(va1, val1) {
      this.ssdate = va1;
      this.qzjs = val1;
      if (va1 == 0) {
        this.currentDate = new Date(this.qsdate);
      } else if (va1 == 1) {
        this.currentDate = new Date(this.jsdate);
      }
    },
    sxreset() {
      this.$set(this.statusArr, 0, true);
      this.$set(this.statusArr, 1, true);
      this.$set(this.statusArr, 2, true);
      this.$set(this.statusArr, 3, true);

      this.$set(this.sideArr, 0, true);
      this.$set(this.sideArr, 1, true);
      this.sxstatus = [3, 4, 5];
      this.sxside = [0, 1];
      //重置
        this.rightdate = moment().format("YYYY-MM-DD");
        this.leftdate = moment().subtract(7, "day").format("YYYY-MM-DD");
        this.recently = 1;
        this.show = false
      this.$emit('refreshGetList')
    },
    sxnotarize() {
      //查询
      this.sxstatus = [];
      this.sxside = [];
      if (this.statusArr[0]) {
        this.sxstatus.push(3);
      }
      if (this.statusArr[1]) {
        this.sxstatus.push(2);
      }
      if (this.statusArr[2]) {
        this.sxstatus.push(4);
      }
      if (this.statusArr[3]) {
        this.sxstatus.push(5);
      }
      if (this.sideArr[0]) {
        this.sxside.push(0);
      }
      if (this.sideArr[1]) {
        this.sxside.push(1);
      }
      this.show = false;
      //   this.rightdatez = this.rightdate;
      //   this.leftdatez = this.leftdate;
      //   this.recentlyz = this.recently;
      //   this.page = 1;
      //   this.getOrderList();
      this.$emit('refreshGetList')
    },
  },
};
</script>

<style lang="scss" scoped>
.sxshow {
  padding: 0 4.2vw 8vw;
  box-sizing: border-box;
  h2 {
    margin-top: 4.4vw;
  }
  .sxtitle {
    text-align: left;
    font-size: 3.7vw;
    color: #8992AE;
    padding-bottom: 2.1vw;
    border-bottom: 0.2vw solid #333540;
    margin-bottom: 4.2vw;
  }
  .sxtime {
    font-size: 3.7vw;
    .sxtime_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4.2vw;
      div {
        width: 35.7vw;
        height: 6.9vw;
        line-height: 6.9vw;
        background-color: #171A2B;
        border-radius: 5px;
      }
    }
    .sxtime_bottom {
      display: flex;
      // justify-content: space-between;
      margin-bottom: 8.8vw;
      p {
        width: 17.8vw;
        height: 5.8vw;
        line-height: 5.8vw;
        background-color: #171A2B;
        color: #8992AE;
        border-radius: 5px;
        margin-right: 4.2vw;
      }
      .sxtime_acp {
        background-color: #8992AE;
        color: #fff;
      }
    }
  }
  .sxstate {
    display: flex;

    flex-wrap: wrap;
    margin-bottom: 6.4vw;
    .sxon {
      display: flex;
      align-items: center;
      width: 50%;
      margin-bottom: 4.2vw;
      img {
        width: 4.2vw;
        margin-right: 2.1vw;
      }
      p {
        height: 4.2vw;
        line-height: 4.8vw;
        color: #8992AE;
      }
    }
  }
  .reset_confirm {
    display: flex;
    justify-content: space-between;
    button {
      width: 42.6vw;
      height: 10vw;
    }
  }
}

.hyshow {
  background: #090A1B;
  // overflow: visible;
  border-radius: 10px 10px 0px 0px;

  h2 {
    font-weight: 500;
    margin: 5.8vw 0 6.9vw;
  }
  .buttonwai {
    display: flex;
    justify-content: space-evenly;
    .button {
      width: 44vw;
      height: 10.6vw;
      background-color: #171A2B;
      color: #d6d6d6;
      border: 0;
      border-radius: 5px;
    }
    .buttona {
      background-color: #090A1B;
      border: 2px solid #0a7aff;
    }
  }
  .hint {
    padding: 0 4vw;
    text-align: left;
    margin: 7vw 0 6vw;
  }
  .contract-content {
    padding: 0 4vw;
    text-align: left;
    color: #8992AE;
    line-height: 6vw;
    p {
      margin-bottom: 2.4vw;
    }
  }
  .confirm {
    width: 92vw;
    height: 10vw;
    margin-top: 8vw;
  }
  .search {
    ::v-deep .van-field__clear {
      display: none;
    }
    //   margin-top: 7vw;
    // margin-left: 3.2vw;
    height: 9.6vw;
    background: #090A1B;
    border-radius: 15px;

    .van-search__content {
      background-color: #353945 !important;
      // left: 3.2vw !important;
      position: relative !important;
      padding-right: 0.8vw !important;
      border-radius: 15px;
    }

    ::v-deep .van-field__left-icon {
      margin-right: 2.5vw !important;
      width: 4.8vw !important;
      height: 4.8vw !important;
      color: rgba(135, 139, 151, 100);
    }
    ::v-deep .van-icon {
      margin-right: 2.5vw !important;
      width: 4.8vw !important;
      height: 4.8vw !important;
      color: rgba(135, 139, 151, 100);
      font-size: 4.8vw;
      position: relative;
      top: 0.4vw;
    }
    .van-search {
      width: 93.6vw;
      height: 9.6vw;
      border-radius: 1.3vw !important;
      background: rgba(45, 47, 59, 100) !important;
      position: sticky;
      top: 0;
      padding: 0 4vw 0 0 !important;
    }
    ::v-deep .van-cell {
      background: #353945 !important;
      border-radius: 15px;
      padding: 3px 8px 2px 0;
    }

    ::v-deep .van-field__control {
      color: #fff !important;
    }
  }
  .hyoption {
    padding: 4.2vw;
    font-size: 3.7vw;
    color: #8992AE;
    border-bottom: 1px solid rgba(51, 53, 64, 100);
    text-align: left;
  }
  .hyoption1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .huadong {
    overflow-y: auto;
    max-height: 55vh;
  }
}
.timeshow {
  :deep(.van-picker) {
    background-color: #090A1B;
    .van-picker-column__item {
      color: #8992AE !important;
    }
    .van-picker__mask {
      background-image: inherit;
    }
    .van-picker__confirm {
      color: #0a7aff;
    }
    .van-picker-column__item--selected {
      color: #fff !important;
    }
  }
}
.timeshow1 {
  .sxtime {
    font-size: 3.7vw;
    padding: 0 4.2vw;
    .sxtime_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4.2vw;
      div {
        width: 35.7vw;
        height: 6.9vw;
        line-height: 6.9vw;
        background-color: #171A2B;
        border-radius: 5px;
      }
    }
    .sxtime_bottom {
      display: flex;
      // justify-content: space-between;
      margin-bottom: 8.8vw;
      p {
        width: 16.8vw;
        height: 5.8vw;
        line-height: 5.8vw;
        background-color: #171A2B;
        color: #8992AE;
        border-radius: 5px;
        margin-right: 4.2vw;
      }
      .sxtime_acp {
        background-color: #8992AE;
        color: #fff;
      }
    }
  }
}
</style>